<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="keywords"
      content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具"
    />
    <meta
      name="description"
      content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图"
    />
    <title>百度地图API自定义地图</title>
    <!--引用百度地图API-->
    <script
      type="text/javascript"
      src="http://api.map.baidu.com/api?v=2.0&ak=l1P2oGaYVwBZmDoN8VeBLQh7Ne16YIZp"
    ></script>
  </head>

  <body>
    <!--百度地图容器-->
    <div
      style="
        width: 700px;
        height: 550px;
        border: #ccc solid 1px;
        font-size: 12px;
      "
      id="map"
    ></div>
    <p style="color: red; font-weight: 600">
      地图生成工具基于百度地图JS api v2.0版本开发，使用请申请密匙。
      <a
        href="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction"
        style="color: #2f83c7"
        target="_blank"
        >了解如何申请密匙</a
      >
      <a
        href="http://lbsyun.baidu.com/apiconsole/key?application=key"
        style="color: #2f83c7"
        target="_blank"
        >申请密匙</a
      >
    </p>
  </body>
  <script type="text/javascript">
    //创建和初始化地图函数：
    function initMap() {
      createMap(); //创建地图
      setMapEvent(); //设置地图事件
      addMapControl(); //向地图添加控件
      addMapOverlay(); //向地图添加覆盖物
    }
    function createMap() {
      map = new BMap.Map('map');
      map.centerAndZoom(new BMap.Point(116.403874, 39.914889), 12);
    }
    function setMapEvent() {
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom();
    }
    function addClickHandler(target, window) {
      target.addEventListener('click', function () {
        target.openInfoWindow(window);
      });
    }
    function addMapOverlay() {}
    //向地图添加控件
    function addMapControl() {
      var scaleControl = new BMap.ScaleControl({
        anchor: BMAP_ANCHOR_BOTTOM_LEFT,
      });
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        type: BMAP_NAVIGATION_CONTROL_LARGE,
      });
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        isOpen: true,
      });
      map.addControl(overviewControl);
    }
    var map;
    initMap();

    var map = new BMapGL.Map('container');
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
    // 创建地理编码实例
    var myGeo = new BMapGL.Geocoder();
    // 根据坐标得到地址描述
    myGeo.getLocation(new BMapGL.Point(116.364, 39.993), function (result) {
      if (result) {
        alert(result.address);
      }
    });

    var map = new BMapGL.Map('container');
    map.centerAndZoom(new BMapGL.Point(116.331398, 39.897445), 13);
    var geoc = new BMapGL.Geocoder();
    map.addEventListener('click', function (e) {
      var pt = e.latlng;
      geoc.getLocation(pt, function (rs) {
        var addComp = rs.addressComponents;
        alert(
          addComp.province +
            ', ' +
            addComp.city +
            ', ' +
            addComp.district +
            ', ' +
            addComp.street +
            ', ' +
            addComp.streetNumber
        );
      });
    });
  </script>
</html>
